<template>
  <div>
    <div class="searchBox">
      <router-link to="/showsearch">
        <div class="searchInput" @click="goSearch">
          <i class="iconfont icon-sousuo"></i>
          找明星、演出、场馆
        </div>
      </router-link>
    </div>
    <div class="wrap">
      <ul>
        <li v-for="v in arr" :key="v.cid" @click="golistDetail(v.cid)" :class="{red:$route.query.id==v.cid}">
          <!-- v-show="bool?red:''" -->
          <span>{{v.cname}}</span>
        </li>
      </ul>
    </div>
    <selectscon :AAarr="itemArr" />
  </div>
</template>
<script>
import getLink from '@/api/getLink.js'
import getData from '@/api/getdata.js'
import selectscon from '@/components/wyw/selectLists/show-list-con.vue'
export default {
  data() {
    return {
      red: '',
      arr: [],
      itemArr: []
    }
  },
  components: {
    selectscon
  },
  created() {
    getLink('/apidl/show/listsCon').then(res => {
      this.arr = res.data
    })
    getData('/apidl/selectListsCon', { id: this.$route.query.id }).then(ok => {
      this.itemArr = ok.data.oneById
    })
  },
  methods: {
    golistDetail(listconNum) {
      this.$router.replace({
        path: '/list',
        query: {
          id: listconNum
        }
      })
      this.bool == !this.bool
      // let lis = document.querySelectorAll('li')
      // lis[i].firstElementChild.style.display = 'block'
      getData('/apidl/selectListsCon', { id: listconNum }).then(ok => {
        this.itemArr = ok.data.oneById
      })
    },
    goSearch() {
      this.$router.push('/showsearch')
    }
  },
}
</script>
<style scoped>
.red {
  /* width: 1rem;
  margin-left: 0.1rem;
  height: 0.05rem;
  bottom: 0.08rem;
  position: absolute;
  background: red; */
  border-bottom: 0.01rem solid red;
  color: red
}
.searchBox {
  width: 100%;
  background-color: #eeebeb;
  padding: 0.02rem;
}
.searchBox .searchInput {
  margin: 0.22rem auto;
  width: 90%;
  height: 0.6rem;
  color: grey;
  line-height: 0.6rem;
  border-radius: 0.2rem;
  background-color: #ffffff;
}
.wrap {
  overflow-x: auto;
  margin: auto;
  width: 100%;
}
ul {
  display: flex;
  width: 20.58rem;
  margin: auto;
  height: 0.8rem;
  border-bottom: 0.01rem solid grey;
  background-color: #ffffff;
}
li {
  width: 1.3rem;
  line-height: 0.8rem;
  /* background-color: bisque; */
  text-align: center;
  margin-right: 0.3rem;
  font-size: 0.26rem;
  border-bottom: 1px solid transparent;
  position: relative;
}
::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
</style>